<template>
  <div class="pinglun">
    <!-- 头部导航栏 -->
    <div class="header">
      <van-nav-bar
        style="background-color: #f4b4b6"
        title="我的咨询评论"
        left-text="返回"
        fixed
        left-arrow
        @click-left="onClickLeft"
      />
      <!-- 占位 -->
      <div style="height: 60px"></div>
    </div>
    <van-search
        v-model="value"
        show-action
        label="内容"
        placeholder="请输入评论内容"
        @search="onSearch"
      >
      <template #action>
        <van-button @click="onSearch" size='small' style="background-color:#F4B4B6;color:#fff;">搜索</van-button>
      </template>
    </van-search>
    <!-- 评论列表 -->
    <div class="list">
      <van-cell-group>
        <van-cell
          v-for="comment in commentsData"
          :key="comment.id"
          :title="comment.comment"
          :label="comment.commentTime | fmtDate"
        >
          <template #right-icon>
            <div>
              <van-icon
              name="browsing-history-o"
              size="22"
              color="#1989fa"
              style="margin-top: 20px;margin-left:10px;"
              @click="toArticle(comment.articleId)"
              />
              <van-icon
                name="delete-o"
                size="22"
                color="#1989fa"
                style="margin-top: 20px;margin-left:10px;"
                @click="deleteComments(comment.id)"
              />
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <!-- 占位 -->
      <div style="height: 60px"></div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios";
export default {
  data() {
    return {
      userId: "",
      commentsData: [],
      value:''
    };
  },
  methods: {
    // 查询该用户所有评论
    async getAllComments(id) {
      this.commentsData = [];
      let data = {
        page: 1,
        pageSize: 100,
        keywords:this.value
      };
      let res = await get("/comment/pageQuery", data);
      for (var i = 0; i < res.data.data.list.length; i++) {
        if (res.data.data.list[i].userId == id) {
          this.commentsData.push(res.data.data.list[i]);
        }
      }
      console.log(this.commentsData);
      if(this.commentsData.length==0){
        this.$toast.fail('暂无相关数据');
      }
    },
    // 查询评论
    onSearch(){
      this.commentsData=[],
      this.getAllComments(this.userId)
    },
    // 删除评论
    deleteComments(id) {
      this.$dialog
        .confirm({
          message: "您确定要删除该评论吗？",
        })
        .then(async() => {
          let res = await get("/comment/deleteById", { id });
          this.getAllComments(this.userId);
        })
        .catch(() => {});
    },
    // 跳转到评论对应的文章
    toArticle(id){
      this.$router.push({
        path: "news",
        query: {
          id:id,
        },
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {
    this.userId = this.$route.query.id;
    this.getAllComments(this.userId);
  },
};
</script>

<style lang="less" scoped>
.list .van-cell{
  border-bottom: 1px dotted #ccc;
}
/deep/ .van-nav-bar__title {
  color: #fff;
}
/deep/ .van-nav-bar__text {
  color: #fff;
}
/deep/ .van-icon-arrow-left {
  color: #fff;
}
</style>